<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>FieldSet</title>
  <style type="text/css" rel="stylesheet">
	body {
		font-size:12px;
		font-family: "sans serif",tahoma,verdana,helvetica;
		margin:0;
		background-color:#F0F0EE;
		overflow:hidden;
	}
	label {
		cursor:pointer;
	}
	.main {
		margin: 10px;
	}
	.table {
		list-style-image:none;
		list-style-position:outside;
		list-style-type:none;
		margin:0;
		padding:0;
		display:block;
	}
	.color-picker {
		border: 1px solid #A0A0A0;
		background-color: #FFFFFF;
		font-size: 12px;
		width: 60px;
		height: 20px;
		line-height: 20px;
		padding-left: 5px;
		overflow: hidden;
		display: -moz-inline-stack;
		display: inline-block;
		vertical-align: middle;
		zoom: 1;
		*display: inline;
		cursor: pointer;
	}
  </style>
<script language="javascript">
function checkenter(theinput)
{
 theinput.value=theinput.value.replace(/\D/g,'');
}
</script>   	
<script type="text/javascript">
	var KE = parent.KindEditor;
	location.href.match(/\?id=([\w-]+)/i);
	var id = RegExp.$1;
	KE.event.ready(function() {
		
		var borderColorBox = KE.$('borderColor', document);
		var FieldBorderColor = KE.$('FieldBorderColor', document);
		var borderColor = '#000000';
		function setColor(el, color) {
			el.style.backgroundColor = color;
			el.style.color = (color == '#000000') ? '#FFFFFF' : '#000000';
			el.innerHTML = color;
			FieldBorderColor.value= color;
		}
		setColor(borderColorBox, borderColor);
		var picker;
		var currentElement;
		function removePicker() {
			if (picker) {
				picker.remove();
				picker = null;
				currentElement = null;
			}
		}
		function onclickFunc(el) {
			if (picker && el === currentElement) {
				removePicker();
			} else {
				removePicker();
				var dialog = KE.g[id].dialogStack[0];
				dialog.beforeHide = removePicker;
				dialog.ondrag = removePicker;
				var scrollPos = KE.util.getScrollPos();
				var iframePos = KE.util.getElementPos(dialog.iframe);
				var pos = KE.util.getElementPos(el);
				picker = new KE.colorpicker({
					x : iframePos.x + pos.x - scrollPos.x,
					y : iframePos.y + pos.y - scrollPos.y + 22,
					z : dialog.zIndex + 1,
					onclick : function(color) {
						setColor(el, color);
						removePicker();
					},
					selectedColor : (el.innerHTML || '')
				});
				picker.create();
				currentElement = el;
			}
		}
		borderColorBox.onclick = function() {
			onclickFunc(borderColorBox);
		};
		KE.util.pluginLang('FieldSet', document);
		KE.util.hideLoadingPage(id);
	}, window, document);
</script>
</head>
<body>
	<div class="main">
<table width="380" border="0" align="center" cellpadding="0" cellspacing="3">
        <tr>
          <td width="125" align="right">栏目框宽度：</td>
          <td width="246">
		  <input type="text" name="FieldSetWidth" id="FieldSetWidth" value="100" size="8" onkeyup="checkenter(this)"  onafterpaste="checkenter(this)">
		  <select name="FieldSetWidthMode" id="FieldSetWidthMode">
              <option value="%" selected>%</option>
              <option value="">px</option>
          </select></td>
        </tr>
        <tr> 
          <td align="right">边框粗细：</td>
          <td><input name="FieldBorder" id="FieldBorder" size="8" maxlength="3" onkeyup="checkenter(this)"  onafterpaste="checkenter(this)">
          px</td>
        </tr>
        <tr> 
          <td align="right">边框颜色：</td>
          <td>
		  <input type="hidden" name="FieldBorderColor" id="FieldBorderColor">
		   <span id="borderColor" class="color-picker"></span>
		  </td>
        </tr>
        <tr>
          <td width="125" align="right">栏目框对齐方式：</td>
          <td width="246"><select name="FieldSetAlign" id="FieldSetAlign">
              <option value="center" selected>居中</option>
              <option value="left">左对齐</option>
              <option value="right">右对齐</option>
          </select></td>
        </tr>
        <tr> 
          <td align="right">栏目标题：            </td>
          <td><input name="LegendTitle" type="text" id="LegendTitle" size="32"></td>
        </tr>
        <tr>
          <td align="right">标题对齐方式：          </td>
          <td><select name="LegendAlign" id="LegendAlign">
            <option value="left" selected>左对齐</option>
            <option value="center">居中</option>
            <option value="right">右对齐</option>
          </select></td>
        </tr>
      </table>
	</div>
</body>
</html>
